<template>
  <div class="kxz-callLog__msg">
    <header class="top">
      <span class="input">{{cuTel || '暂无号码'}}</span>
      <a href="javascript:;" class="to" @click="handleRelate">关联</a>
      <el-form :inline="true">
        <el-form-item label="">
          <el-input v-model="inputTel" placeholder="关联手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLeadIn">导入</el-button>
        </el-form-item>
      </el-form>
      <span class="singleNum">单号：{{cuDh || '暂无数据'}}</span>
      <template v-if="0">
        <el-form :inline="true">
          <el-form-item label="">
            <el-select v-model="selKfGroup" placeholder="请选择客服组别" @change="handleGTK">
              <el-option v-for="(value, key) in cuKfGroup" :key="key" :label="value" :value="key">
              </el-option>
            </el-select>
            <el-select v-model="selKfTel" placeholder="请选择客服">
              <el-option v-for="item in opts.kfs2" :key="item.usertel" :label="item.UserName" :value="item.usertel">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleTransfer">转接</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- <el-button type="primary" class="break" @click="handleHangup">挂断</el-button> -->
    </header>
    <div class="bottom">
      <el-row>
        <el-col :span="6">
          <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>{{cuCallMsg !== null && cuCallMsg.cName ? cuCallMsg.cName : '暂无数据'}}</el-col>
        <el-col :span="6">
          <span>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</span>
          <!-- @click="handleLinkVIPDetail(cuCallMsg.cU_ser,cuCallMsg.id)" -->
          <span @click="cuCallMsg.cU_ser ? $router.push(`/vip-manage/detail/${cuCallMsg.id}/jbxx`) : null" :class="cuCallMsg.cU_ser? 'linkDetail' : ' ' ">{{cuCallMsg !== null && cuCallMsg.cU_ser ? cuCallMsg.cU_ser : '暂无数据'}}</span>&nbsp;&nbsp;v{{cuCallMsg !== null && cuCallMsg.VipLevel ? cuCallMsg.VipLevel : 0}}
        </el-col>
        <el-col :span="6">
          <span>注册渠道：</span>{{cuCallMsg !== null && cuCallMsg.qdname ? cuCallMsg.qdname : '暂无数据'}}</el-col>
        <el-col :span="6">
          <span>所属地区：</span>{{cuCallMsg !== null && cuCallMsg.cShen ? `${cuCallMsg.cShen} ${cuCallMsg.cShi}` : '暂无数据'}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>注册时间：</span>{{cuCallMsg.tDate || '暂无数据'}}</el-col>
        <el-col :span="6">
          <span>投资总额：</span>{{cuCallMsg !== null && cuCallMsg.fTzze !== '' && cuCallMsg.fTzze !== undefined ? `￥${cuCallMsg.fTzze.toFixed(2)}` : '暂无数据'}}</el-col>
        <el-col :span="6">
          <span>可用余额：</span>{{cuCallMsg !== null && cuCallMsg.fSjje !== '' && cuCallMsg.fSjje !== undefined ? `￥${cuCallMsg.fSjje.toFixed(2)}` : '暂无数据'}}</el-col>
        <el-col :span="6">
          <span>待收金额：</span>{{cuCallMsg !== null && cuCallMsg.fDsje !== '' && cuCallMsg.fDsje !== undefined ? `￥${cuCallMsg.fDsje.toFixed(2)}` : '暂无数据'}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>投资笔数：</span>{{cuCallMsg !== null && cuCallMsg.tzcs !== '' && cuCallMsg.tzcs !== undefined ? cuCallMsg.tzcs : '暂无数据'}}
        </el-col>
        <el-col :span="6">
          <span>投标记录：</span>
          <span class="find" @click="handleOpen(3)">查看</span>
        </el-col>
        <el-col :span="6">
          <span>红&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;包：</span>
          <span class="find" @click="handleOpen(4)">查看</span>
        </el-col>
        <el-col :span="6">
          <span>体&nbsp;&nbsp;验&nbsp;&nbsp;金：</span>
          <span class="find" @click="handleOpen(5)">查看</span>
        </el-col>
        <el-col :span="6" class="xjq">
          <span>现&nbsp;&nbsp;金&nbsp;&nbsp;券：</span>
          <span class="find" @click="handleOpen(7)">查看</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'log-relative_msg',
  data() {
    const {telMsg} = this.$store.getters.callMsg
    const  inputTel = telMsg.relevanttel || ''
    return {
      inputTel,
      selKfGroup: '',
      selKfTel: '',
      opts: {
        kfs2: []
      }
    }
  },
  computed: {
    cuTel() {
      return this.$store.getters.callMsg.mobile
    },
    cuDh() {
      return this.$store.getters.callMsg.telMsg.dh
    },
    cuCallMsg() {
      return this.$store.getters.callMsg.leadInMsg
    },
    cuCallType() {
      return this.$store.getters.callMsg.callType
    },
    cuWsData() {
      return websocket.data
    },
    cuKfGroup() {
      return this.$store.getters.getGroup
    },
    cuKfAll() {
      return this.$store.getters.getAllkf
    },
  },
  methods: {
    handleRelate() {
      const id = this.$store.getters.callMsg.telMsg.id
      const check = this.checkTel(0)
      if(id === undefined){
        this.$toast({
          message:'用户信息不存在，请先导入关联号码来进行验证！'
        })
        return
      }
      if (check) {
        this.getRelate()
      }
    },
    handleLeadIn() {
      const check = this.checkTel(1)
      if (check) {
        this.getLeadIn()
      }
    },
    handleOpen(val) {
      this.$emit('onOpen', val)
    },
    handleGTK() {
      this.getKfsByGroup()
    },
    // handleHangup() {
    //   // 如果未挂断，则提示建立通话，如果已挂断，则提示填写通话内容
    //   if (websocket.state === 0) {
    //     this.$toast({
    //       message: '请先连接'
    //     })
    //     return
    //   }
    //   if (websocket.pickup === false) {
    //     this.$toast({
    //       message: '请先建立通话'
    //     })
    //     return
    //   }
    //   websocket.WsSend('hangup')
    // },
    handleTransfer() {
      const ws = websocket
      if (ws.state === 0) {
        this.$toast({
          message: '请先连接'
        })
        return
      }
      if (ws.pickup === false) {
        this.$toast({
          message: '请先建立通话'
        })
        return
      }
      this.$vux.loading.show({
        text: 'Loading'
      })
      websocket.TalkPhone = this.cuTel
      websocket.transferPhone = this.selKfTel
      ws.WsSend('transfer')
    },
    transferHandler(val) {
      if (val.result === '0') {
        this.getTransfer(val)
        websocket.pickup = false
        websocket.outPhone = ''
        websocket.TalkPhone = ''
        websocket.transferPhone = ''
      }
    },
    checkTel(type) {
      const outTel = this.$store.getters.callMsg.mobile
      const inputTel = this.inputTel
      const tStr = type === 0 ? '关联' : '导入'
      if (new RegExp('^((13[0-9])|(15[^,\\D])|(17[0-9])|(147)|(18[0-9])|(19[0-9]))\\d{8}$').test(inputTel) === false) {
        this.$warn('请输入正确的手机号码')
        return false
      }
      if (outTel === inputTel) {
        this.$warn(`不能${tStr}已有的号码`)
        return false
      }
      return true
    },
    async getRelate() {
      try{
        const mobile1 = this.$store.getters.callMsg.mobile
        const mobile2 = this.inputTel
        const uid = this.$store.getters.callMsg.telMsg.id
        const { data } = await this.$get(this, {
          api: 'ajaxapi/telguanlian.do',
          data: {
            mobile1,
            mobile2,
            uid
          }
        })
        if (data.state === 0 && data.content === true) {
          this.$toast({
            message: '关联成功'
          })
          return
        }
        this.$warn(data.message)
      }catch(e){
        this.$warn('系统ajaxapi/telguanlian.do接口报错')
      }
    },
    async getLeadIn() {
      try{
        const mobile = this.inputTel
        const { data } = await this.$get(this, {
          api: 'ajaxapi/teldaoru.do',
          data: {
            mobile
          }
        })
        if (data.state === 0) {
          // data.content.dh = this.cuCallMsg.dh  //  导入返回的信息没有dh
          this.$store.dispatch('updateCallMsg', {leadInMsg: data.content})
          return
        }
        this.$warn(data.message)
      }catch(e){
        this.$warn('系统ajaxapi/teldaoru.do接口报错')
      }
    },
    async getKfsByGroup(val) {
      try{
        const groupId = this.selKfGroup
        const { data } = await this.$get(this, {
          api: 'ajaxapi/loadAllKf.do',
          data: {
            groupId
          }
        })
        if (data.state === 0) {
          this.selKfTel = ''
          this.opts.kfs2 = data.content
        }
      }catch(e){
        this.$warn('系统ajaxapi/loadAllKf.do接口报错')
      }
    },
    async getTransfer({id}) {
      try{
        const mobile = this.selKfTel
        const { data } = await this.$get(this, {
          api: 'ajaxapi/transfer.do',
          data: {
            mobile,
            callid:id,
            callinaction: 'transfer'
          }
        })
        if (data.state === 0 && data.content === true) {
          this.$router.back()
        }
      }catch(e){
        this.$warn('系统ajaxapi/transfer.do接口报错')
      }
    },
  }
}
</script>

<style lang="scss">
.kxz-callLog__msg {
  $bdColor: #dddfe6;
  $color: #444;
  padding: 33px 0 0 31px;
  background: #fff;
  border: 1px solid $bdColor;
  .top {
    font-size: 16px;
    line-height: 40px;
    color: $color;
    .el-form {
      display: inline-block;
    }
    .el-form-item {
      &:first-child {
        margin-right: 9px;
        margin-left: 20px;
      }
    }
    .el-input__inner {
      height: 40px;
      padding-left: 19px;
      color: #7b8897;
      border: 1px solid #eaecf1;
      background: #fafbfc;
    }
    .el-button {
      padding: 12px 20px;
    }
    .input {
      display: inline-block;
      width: 120px;
      text-align: center;
      margin-right: 8px;
    }
    .to {
      text-decoration: underline;
      color: #5394fc;
    }
    .singleNum {
      margin: 0 30px;
    }
    .break {
      float: right;
      margin-right: 20px;
      background: #ffa838;
      border: none;
      &:hover {
        opacity: .8;
      }
    }
  }
  .bottom {
    width: calc(1250 /1534 * 100%);
    color: #7b8897;
    font-size: 14px;
    .el-row {
      margin-bottom: 30px;
    }
    .find {
      color: #5394fc;
      border-bottom: 1px solid #5394fc;
      cursor: pointer;
    }
  }
  .xjq{
    position: absolute;
    right: - 182px;
    bottom:0;
  }
  .linkDetail{
    color:#5394fc;
    border-bottom:1px solid #5394fc;
    cursor: pointer;
  }
}
</style>
